<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/base.css}">
    <link rel="stylesheet" th:href="@{/css/moduleIndex.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">

</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a th:href="@{|/page/${1}/${session.user.getUserId()}|}">返回首页</a></li>
                <li><a href="#"><span></span>客服服务</a></li>
            </ul>
        </div>
    </div>

        <!--    <img style="width: 400px" th:src="@{/images/sprites.png}">-->


    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#"></a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#" th:text="${productType.productTypeName}">服装</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位 放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>


        <!-- banner -->
        <div class="banner">
            <div class="wrapper">

                <div class="swipe">
                    <!-- 指示器 -->
                    <input type="radio" name="indicator" id="indicator1" checked hidden>
                    <label for="indicator1"></label>
                    <input type="radio" name="indicator" id="indicator2" hidden>
                    <label for="indicator2"></label>
                    <input type="radio" name="indicator" id="indicator3" hidden>
                    <label for="indicator3"></label>

                    <!-- 有多少个图就有多少个li -->
                    <ul>
                        <li><a href="#"><img style="height: 500px;width: 1240px" th:src="@{/productImg/1.jpg}"></a></li>
                        <li><a href="#"><img style="height: 500px;width: 1240px" th:src="@{/productImg/2.webp}" alt=""></a></li>
                        <li><a href="#"><img style="height: 500px;width: 1240px" th:src="@{/productImg/3.webp}" alt=""></a></li>
                    </ul>
                </div>

                <!-- 侧导航 -->
                <div class="aside">
                    <ul>
                        <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                        <li><a href="#">零食<span>薯片 辣辣</span></a></li>
                        <li><a href="#">鞋子<span>休闲 运动</span></a></li>
                    </ul>
                </div>

                <!-- 箭头 -->
                <!-- prev : 上一个  -->
                <a href="#" class="prev"></a>
                <!-- next : 下一个 -->
                <a href="#" class="next"></a>
            </div>
        </div>


    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header 头部 -->
        <div class="hd">
            <h2>物美价廉<span>热爱优先 品质靠谱</span></h2>
            <a href="#">查看全部 </a>
        </div>
        <!-- bd body 身体 -->
        <div class="bd clearfix">
            <ul>
                <li th:each="product : ${productBaseList}" th:object="${product}">
                    <a th:href="|/user/shoppingInfo/*{productId}|">
                        <img th:src="@{|/userImg/*{productImg}|}" alt="">
                        <h3 th:text="*{productName}">HUAWEI P70</h3>
                        <div>￥<span th:text="*{productPrice}">6999</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer">
            LW商城
        </div>
    </div>

</body>
</html>